<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <div class="title">
            <el-avatar
              src="http://localhost:3000/upload/aniya.jpg"
              :size="60"
            ></el-avatar>
          </div>
        </el-col>
        <el-col :span="10">
          <ul>
            <b>
              <li><router-link to="./">回到首页</router-link></li>
              <li><router-link to="./message">留言</router-link></li>
              <li><router-link to="/about">联系我们</router-link></li>
            </b>
          </ul>
        </el-col>
        <el-col :span="6">
          <div class="search">
            <el-input
              size="small"
              placeholder="请输入内容"
              width="25%"
              suffix-icon="el-icon-search"
              v-model="keyword"
              @keyup.enter.native="handleSearch"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="load">
            <el-button type="primary" size="middle" @click="handleLogin"
              >登录</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-card v-for="item in types" :key="item.id">
        <i class="el-icon-location"></i>
        <h2>
          {{ item.type }}
        </h2>
        <el-button
          @click="GoTypeArticle(item.id, item.type)"
          type="primary"
          size="middle"
          class="type-button"
        >
          查看该分类文章
        </el-button>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      types: [],
      imgPath: '',
      page: 1, //当前的页码数
      size: 5, // 每页显示记录数
      total: 0, // 记录总数
      keyword: '',
    }
  },
  created() {
    this.getTypeData()
  },
  methods: {
    getTypeData() {
      this.$api.getType().then((res) => {
        this.types = res.data.result
      })
    },
    GoTypeArticle(id, type) {
      this.$router.push(`/type/article?id=${id}&type=${type}`)
    },
    handleLogin() {
      window.location.href = 'http://localhost:8080/login'
    },
    handleSearch() {
      if (this.keyword == '') {
        this.getTypeData()
        return
      }
      this.$api.postType(this.keyword).then((res) => {
        this.$message.success(res.data.message)
        this.types = res.data.result
      })
    },
  },
}
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
body {
  background-image: url('../assets/images/aniya3.jpg');
}
.el-container {
  min-width: 900px;
}

li {
  float: left;
  list-style: none;
  padding: 20px;
  line-height: 60px;
  font-size: 24px;
  font-family: KaiTi;
}
.look {
  text-align: center;
}
.firstpage {
  text-align: center;
}
.title,
.search,
.load {
  line-height: 80px;
  margin: 5px 40px;
}
.load {
  width: 100px;
  margin: 20px;
  line-height: 50px;
}
.el-col {
  display: flex;
  justify-content: center;
}
.title {
  margin-top: 20px;
}
.el-button {
  width: 70px;
  height: 40px;
}
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

/* .contentStyle {
  height: 160px;
} */
.el-main {
  margin: 40px auto;
  width: 80vw;
  height: 70vh;
  min-width: 900px;
  background-color: rgba(255, 255, 255, 0.3);
  color: #333;
  text-align: center;
}
.el-card {
  height: 80px;
  margin-bottom: 15px;
  color: rgb(30, 30, 30);
  background: rgba(125, 166, 164, 0.3);
}
.el-card h2 {
  display: inline-block;
  margin-right: 150px;
  font-family: '华文楷体';
}
.el-card .type-button {
  display: inline-block;
  width: 150px;
  border: none;
  background-color: rgb(0, 128, 128);
}
</style>
